<!-- AUI Framework -->
<!DOCTYPE html>
    <html>
    <head>

        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Fides Admin</title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <!-- Favicons -->

        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/icons/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icons/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icons/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="assets/images/icons/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="assets/images/icons/favicon.png" />

        <!--[if lt IE 9]>
          <script src="assets/js/minified/core/html5shiv.min.js"></script>
          <script src="assets/js/minified/core/respond.min.js"></script>
        <![endif]-->

        <!-- Fides Admin CSS Core -->

        <link rel="stylesheet" type="text/css" href="assets/css/minified/aui-production.min.css" />

        <!-- Theme UI -->

        <link id="layout-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/fides/color-schemes/dark-blue.min.css" />

        <!-- Fides Admin Responsive -->

        <link rel="stylesheet" type="text/css" href="assets/themes/minified/fides/common.min.css" />
        <link rel="stylesheet" type="text/css" href="assets/themes/minified/fides/responsive.min.css" />

        <!-- Fides Admin JS -->

        <script type="text/javascript" src="assets/js/minified/aui-production.min.js"></script>

        <script>
            jQuery(window).load(
                function(){

                    var wait_loading = window.setTimeout( function(){
                      $('#loading').slideUp('fast');
                      jQuery('body').css('overflow','auto');
                    },1000
                    );

                });

        </script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body style="overflow: hidden;">
        

        <div id="loading" class="ui-front loader ui-widget-overlay bg-white opacity-100">
            <img src="assets/images/loader-dark.gif" alt="" />
        </div>

        <div id="page-wrapper" class="demo-example">

            <div class="theme-customizer">
                <a href="javascript:;" class="change-theme-btn" title="Change theme">
                    <i class="glyph-icon icon-cog"></i>
                </a>
                <div class="theme-wrapper">

                    <div class="popover-title">Boxed layout options</div>
                    <div class="pad10A clearfix">
                        <a class="fluid-layout-btn hidden bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Full width layout</span></a>
                        <a class="boxed-layout-btn bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Boxed layout</span></a>
                    </div>
                    <div class="popover-title">Boxed layout backgrounds</div>
                    <div class="pad10A clearfix">
                        <a href="javascript:;" class="choose-bg" boxed-bg="#000" style="background: #000;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#333" style="background: #333;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#666" style="background: #666;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#888" style="background: #888;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#383d43" style="background: #383d43;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#fafafa" style="background: #fafafa; border: #ccc solid 1px;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#fff" style="background: #fff; border: #eee solid 1px;" title=""></a>
                    </div>
                    <div class="popover-title">Color schemes</div>
                    <div class="pad10A clearfix change-layout-theme">
                        <p class="font-gray-dark font-size-11 pad0B">More color schemes will be available soon!</p>
                        <div class="divider mrg10T mrg10B"></div>
                        <a href="javascript:;" class="choose-theme" layout-theme="dark-blue" title="">
                            <span style="background: #2381E9;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-blue" title="">
                            <span style="background: #2381E9;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme" layout-theme="dark-green" title="D">
                            <span style="background: #78CE12;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-green" title="D">
                            <span style="background: #78CE12;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme" layout-theme="dark-orange" title="">
                            <span style="background: #FF6041;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-orange" title="">
                            <span style="background: #FF6041;"></span>
                        </a>
                    </div>

                </div>
            </div>

            <div id="page-header" class="clearfix">
                <div id="header-logo">
                    <a href="javascript:;" class="tooltip-button" data-placement="bottom" title="Close sidebar" id="close-sidebar">
                        <i class="glyph-icon icon-caret-left"></i>
                    </a>
                    <a href="javascript:;" class="tooltip-button hidden" data-placement="bottom" title="Open sidebar" id="rm-close-sidebar">
                        <i class="glyph-icon icon-caret-right"></i>
                    </a>
                    <a href="javascript:;" class="tooltip-button hidden" title="Navigation Menu" id="responsive-open-menu">
                        <i class="glyph-icon icon-align-justify"></i>
                    </a>
                    Fides Admin <i class="opacity-80">1.1</i>
                </div>
                <div class="hide" id="black-modal-60" title="Modal window example">
                    <div class="pad20A">

                        <div class="infobox notice-bg">
                            <div class="bg-azure large btn info-icon">
                                <i class="glyph-icon icon-bullhorn"></i>
                            </div>
                            <h4 class="infobox-title">Modal windows</h4>
                            <p>Thanks to the solid modular Fides Admin arhitecture, modal windows customizations are very flexible and easy to apply.</p>
                        </div>

                        <h4 class="heading-1 mrg20T clearfix">
                            <div class="heading-content" style="width: auto;">
                                Icons
                                <small>
                                    All icons across the Fides Admin Framework use FontAwesome icons.
                                </small>
                            </div>
                            <div class="clear"></div>
                            <div class="divider"></div>
                        </h4>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-compass" href="../icon/compass"><i class="glyph-icon icon-compass"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-collapse" href="../icon/collapse"><i class="glyph-icon icon-collapse"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-collapse-top" href="../icon/collapse-top"><i class="glyph-icon icon-collapse-top"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-expand" href="../icon/expand"><i class="glyph-icon icon-expand"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-eur" href="../icon/eur"><i class="glyph-icon icon-eur"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-euro" href="../icon/eur"><i class="glyph-icon icon-euro"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-gbp" href="javascript:;"><i class="glyph-icon icon-gbp"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-usd" href="javascript:;"><i class="glyph-icon icon-usd"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-dollar" href="javascript:;"><i class="glyph-icon icon-dollar"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-inr" href="javascript:;"><i class="glyph-icon icon-inr"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-rupee" href="javascript:;"><i class="glyph-icon icon-rupee"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-jpy" href="javascript:;"><i class="glyph-icon icon-jpy"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-yen" href="javascript:;"><i class="glyph-icon icon-yen"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-cny" href="javascript:;"><i class="glyph-icon icon-cny"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-renminbi" href="javascript:;"><i class="glyph-icon icon-renminbi"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-krw" href="javascript:;"><i class="glyph-icon icon-krw"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-won" href="javascript:;"><i class="glyph-icon icon-won"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-btc" href="javascript:;"><i class="glyph-icon icon-btc"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-bitcoin" href="javascript:;"><i class="glyph-icon icon-bitcoin"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-file" href="javascript:;"><i class="glyph-icon icon-file"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-file-text" href="javascript:;"><i class="glyph-icon icon-file-text"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-alphabet" href="javascript:;"><i class="glyph-icon icon-sort-by-alphabet"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-alphabet-al" href="javascript:;"><i class="glyph-icon icon-sort-by-alphabet-alt"></i>t</a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-attributes" href="javascript:;"><i class="glyph-icon icon-sort-by-attributes"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-attribu" href="javascript:;"><i class="glyph-icon icon-sort-by-attributes-alt"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-order" href="javascript:;"><i class="glyph-icon icon-sort-by-order"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-order-alt" href="javascript:;"><i class="glyph-icon icon-sort-by-order-alt"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-thumbs-up" href="javascript:;"><i class="glyph-icon icon-thumbs-up"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-thumbs-down" href="javascript:;"><i class="glyph-icon icon-thumbs-down"></i></a>

                    </div>
                </div>

                <div class="hide" id="white-modal-80" title="Dialog with tabs">
                    <div class="tabs pad15A remove-border opacity-80">
                        <ul class="opacity-80">
                            <li><a href="#example-tabs-1">First</a></li>
                            <li><a href="#example-tabs-2">Second</a></li>
                            <li><a href="#example-tabs-3">Third</a></li>
                        </ul>
                        <div id="example-tabs-1">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </p>
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                        </div>
                        <div id="example-tabs-2">
                            <p>Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
                            </p>
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                        </div>
                        <div id="example-tabs-3">
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                        </div>
                    </div>
                    <div class="pad10A">
                        <div class="infobox success-bg radius-all-4">
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
                        </div>
                    </div>
                    <div class="ui-dialog-buttonpane clearfix">

                        <a href="dropdown_menus.html" class="btn medium float-left bg-azure">
                            <span class="button-content text-transform-upr font-size-11">Dropdown menus</span>
                        </a>
                        <div class="button-group float-right">
                            <a href="buttons.html" class="btn medium bg-black" title="View more buttons examples">
                                <i class="glyph-icon icon-star"></i>
                            </a>
                            <a href="buttons.html" class="btn medium bg-black" title="View more buttons examples">
                                <i class="glyph-icon icon-random"></i>
                            </a>
                            <a href="buttons.html" class="btn medium bg-black" title="View more buttons examples">
                                <i class="glyph-icon icon-map-marker"></i>
                            </a>
                        </div>
                        <a href="javascript:;" class="medium btn bg-blue-alt float-right mrg10R tooltip-button" data-placement="left" title="Remove comment">
                            <i class="glyph-icon icon-plus"></i>
                        </a>

                    </div>
                </div>
                <div class="user-profile dropdown">
                    <a href="javascript:;" title="" class="user-ico clearfix" data-toggle="dropdown">
                        <img width="36" src="assets/images/gravatar.jpg" alt="" />
                        <span>Horia Simon</span>
                        <i class="glyph-icon icon-chevron-down"></i>
                    </a>
                    <ul class="dropdown-menu float-right">
                        <li>
                            <a href="javascript:;" title="">
                                <i class="glyph-icon icon-user mrg5R"></i>
                                Account Details
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="">
                                <i class="glyph-icon icon-cog mrg5R"></i>
                                Edit Profile
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="">
                                <i class="glyph-icon icon-flag mrg5R"></i>
                                Notifications
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="">
                                <i class="glyph-icon icon-signout font-size-13 mrg5R"></i>
                                <span class="font-bold">Logout</span>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu float-left">
                            <a href="javascript:;" data-toggle="dropdown" title="">
                                Dropdown menu
                            </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="javascript:;" title="">
                                            Submenu 1
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" title="">
                                            Submenu 2
                                        </a>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a href="javascript:;" title="">
                                            Submenu 3
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="javascript:;" title="">
                                                    Submenu 2-1
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" title="">
                                                    Submenu 2-2
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="">
                                Another menu item
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="dropdown dash-menu">
                    <a href="javascript:;" data-toggle="dropdown" data-placement="left" class="medium btn primary-bg float-right popover-button-header hidden-mobile tooltip-button" title="Example menu">
                        <i class="glyph-icon icon-th"></i>
                    </a>
                    <div class="dropdown-menu float-right">
                        <div class="small-box">
                            <div class="pad10A dashboard-buttons clearfix">
                                <p class="font-gray-dark font-size-11 pad0B">This menu type can be used in pages, not just popovers.</p>
                                <div class="divider mrg10T mrg10B"></div>
                                <a href="javascript:;" class="btn vertical-button hover-blue-alt" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-dashboard opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Dashboard</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-green" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-tags opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Widgets</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-orange" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-reorder opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Tables</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-orange" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-bar-chart opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Charts</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-purple" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-laptop opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Buttons</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button hover-azure" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-code opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Panels</span>
                                </a>
                            </div>

                            <div class="bg-gray text-transform-upr font-size-12 font-bold font-gray-dark pad10A">Dashboard menu</div>
                            <div class="pad10A dashboard-buttons clearfix">
                                <a href="javascript:;" class="btn vertical-button remove-border bg-blue" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-dashboard opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Dashboard</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-red" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-tags opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Widgets</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-purple" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-reorder opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Tables</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-azure" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-bar-chart opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Charts</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-yellow" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-laptop opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Buttons</span>
                                </a>
                                <a href="javascript:;" class="btn vertical-button remove-border bg-orange" title="">
                                    <span class="glyph-icon icon-separator-vertical pad0A medium">
                                        <i class="glyph-icon icon-code opacity-80 font-size-20"></i>
                                    </span>
                                    <span class="button-content">Panels</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-icon-bar">
                    <div class="dropdown">

                        <a data-toggle="dropdown" href="javascript:;" title="">
                            <span class="badge badge-absolute bg-blue">8</span>
                            <i class="glyph-icon icon-lightbulb"></i>
                        </a>
                        <div class="dropdown-menu">

                            <div class="small-box">
                                <div class="popover-title">Boxed layout options</div>
                                <div class="pad10A clearfix">
                                    <a class="fluid-layout-btn hidden bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Full width layout</span></a>
                                    <a class="boxed-layout-btn bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Boxed layout</span></a>
                                </div>
                                <div class="popover-title">Boxed backgrounds</div>
                                <div class="pad10A clearfix">
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#000" style="background: #000;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#333" style="background: #333;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#666" style="background: #666;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#888" style="background: #888;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#383d43" style="background: #383d43;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#fafafa" style="background: #fafafa; border: #ccc solid 1px;" title=""></a>
                                    <a href="javascript:;" class="choose-bg" boxed-bg="#fff" style="background: #fff; border: #eee solid 1px;" title=""></a>
                                </div>
                                <div class="popover-title">Color schemes</div>
                                <div class="pad10A clearfix change-layout-theme">
                                    <p class="font-gray-dark font-size-11 pad0B">More color schemes will be available soon!</p>
                                    <div class="divider mrg10T mrg10B"></div>
                                    <a href="javascript:;" class="choose-theme" layout-theme="dark-blue" title="">
                                        <span style="background: #2381E9;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-blue" title="">
                                        <span style="background: #2381E9;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme" layout-theme="dark-green" title="D">
                                        <span style="background: #78CE12;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-green" title="D">
                                        <span style="background: #78CE12;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme" layout-theme="dark-orange" title="">
                                        <span style="background: #FF6041;"></span>
                                    </a>
                                    <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-orange" title="">
                                        <span style="background: #FF6041;"></span>
                                    </a>
                                </div>

                                <div class="pad10A button-pane button-pane-alt text-center">
                                    <a href="javascript:;" class="btn medium bg-black">
                                        <span class="button-content text-transform-upr font-bold font-size-11">View all</span>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="dropdown">

                        <a data-toggle="dropdown" href="javascript:;" title="">
                            <span class="badge badge-absolute bg-orange">4</span>
                            <i class="glyph-icon icon-envelope-alt"></i>
                        </a>
                        <div class="dropdown-menu">

                            <div class="scrollable-content medium-box scrollable-small">

                                <ul class="no-border messages-box">
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <i class="glyph-icon icon-warning-sign font-red"></i>
                                                <a href="javascript:;" title="Message title">Important message</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <i class="glyph-icon icon-tag font-blue"></i>
                                                <a href="javascript:;" title="Message title">Some random email</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <a href="javascript:;" class="font-orange" title="Message title">Another received message</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <i class="glyph-icon icon-warning-sign font-red"></i>
                                                <a href="javascript:;" title="Message title">Important message</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <i class="glyph-icon icon-tag font-blue"></i>
                                                <a href="javascript:;" title="Message title">Some random email</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                    <li>
                                        <div class="messages-img">
                                            <img width="32" src="assets/images/gravatar.jpg" alt="" />
                                        </div>
                                        <div class="messages-content">
                                            <div class="messages-title">
                                                <a href="javascript:;" class="font-orange" title="Message title">Another received message</a>
                                                <div class="messages-time">
                                                    3 hr ago
                                                    <span class="glyph-icon icon-time"></span>
                                                </div>
                                            </div>
                                            <div class="messages-text">
                                                This message must be read immediately because of it's high importance...
                                            </div>
                                        </div> 
                                    </li>
                                </ul>

                            </div>
                            <div class="pad10A button-pane button-pane-alt">
                                <a href="messaging.html" class="btn small float-left bg-white">
                                    <span class="button-content text-transform-upr font-size-11">All messages</span>
                                </a>
                                <div class="button-group float-right">
                                    <a href="javascript:;" class="btn small primary-bg">
                                        <i class="glyph-icon icon-star"></i>
                                    </a>
                                    <a href="javascript:;" class="btn small primary-bg">
                                        <i class="glyph-icon icon-random"></i>
                                    </a>
                                    <a href="javascript:;" class="btn small primary-bg">
                                        <i class="glyph-icon icon-map-marker"></i>
                                    </a>
                                </div>
                                <a href="javascript:;" class="small btn bg-red float-right mrg10R tooltip-button" data-placement="left" title="Remove comment">
                                    <i class="glyph-icon icon-remove"></i>
                                </a>
                            </div>

                        </div>
                    </div>
                    <div class="dropdown">

                        <a data-toggle="dropdown" href="javascript:;" title="">
                            <span class="badge badge-absolute bg-green">9</span>
                            <i class="glyph-icon icon-bell"></i>
                        </a>
                        <div class="dropdown-menu">

                            <div class="popover-title display-block clearfix form-row pad10A">
                                <div class="form-input">
                                    <div class="form-input-icon">
                                        <i class="glyph-icon icon-search transparent"></i>
                                        <input type="text" placeholder="Search notifications..." class="radius-all-100" name="" id="" />
                                    </div>
                                </div>
                            </div>
                            <div class="scrollable-content medium-box scrollable-small">

                                <ul class="no-border notifications-box">
                                    <li>
                                        <span class="btn bg-purple icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text">This is an error notification</span>
                                        <div class="notification-time">
                                            a few seconds ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="btn bg-orange icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text">This is a warning notification</span>
                                        <div class="notification-time">
                                            <b>15</b> minutes ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="bg-green btn icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text font-green font-bold">A success message example.</span>
                                        <div class="notification-time">
                                            <b>2 hours</b> ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="btn bg-purple icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text">This is an error notification</span>
                                        <div class="notification-time">
                                            a few seconds ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="btn bg-orange icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text">This is a warning notification</span>
                                        <div class="notification-time">
                                            <b>15</b> minutes ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="bg-blue btn icon-notification glyph-icon icon-user"></span>
                                        <span class="notification-text font-blue">Alternate notification styling.</span>
                                        <div class="notification-time">
                                            <b>2 hours</b> ago
                                            <span class="glyph-icon icon-time"></span>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                            <div class="pad10A button-pane button-pane-alt text-center">
                                <a href="notifications.html" class="btn medium primary-bg">
                                    <span class="button-content">View all notifications</span>
                                </a>
                            </div>

                        </div>
                    </div>
                    <div class="dropdown">

                        <a data-toggle="dropdown" href="javascript:;" title="">
                            <span class="badge badge-absolute bg-red">2</span>
                            <i class="glyph-icon icon-tasks"></i>
                        </a>
                        <div class="dropdown-menu" id="progress-dropdown">

                            <div class="scrollable-content small-box scrollable-small">

                                <ul class="no-border progress-box">
                                    <li>
                                        <div class="progress-title">
                                            Finishing uploading files
                                            <b>23%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="23">
                                            <div class="progressbar-value bg-blue">
                                                <div class="progressbar-overlay"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Roadmap progress
                                            <b>91%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="91">
                                            <div class="progressbar-value primary-bg">
                                                <div class="progressbar-overlay"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Images upload
                                            <b>58%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="58">
                                            <div class="progressbar-value bg-blue-alt"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            WordPress migration
                                            <b>74%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="74">
                                            <div class="progressbar-value bg-purple"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Agile development procedures
                                            <b>91%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="91">
                                            <div class="progressbar-value primary-bg">
                                                <div class="progressbar-overlay"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Systems integration
                                            <b>58%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="58">
                                            <div class="progressbar-value bg-blue-alt"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="progress-title">
                                            Code optimizations
                                            <b>97%</b>
                                        </div>
                                        <div class="progressbar-small progressbar" data-value="97">
                                            <div class="progressbar-value bg-yellow"></div>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                            <div class="pad10A button-pane button-pane-alt text-center">
                                <a href="notifications.html" class="btn medium font-normal bg-green">
                                    <span class="button-content">View all</span>
                                </a>
                            </div>

                        </div>
                    </div>
                </div>

            </div><!-- #page-header -->

            <div id="page-sidebar" class="scrollable-content">

                <div id="sidebar-menu">
                    <ul>
                        <li>
                            <a href="index.html" title="Dashboard">
                                <i class="glyph-icon icon-dashboard"></i>
                                Dashboard
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="Components">
                                <i class="glyph-icon icon-code"></i>
                                Components
                            </a>
                            <ul>
                                <li>
                                    <a href="dashboard_panels.html" title="Dashboard panels">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dashboard panels
                                    </a>
                                </li>
                                <li>
                                    <a href="social_boxes.html" title="Social boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Social boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="information_boxes.html" title="Information boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Information boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="chat.html" title="Chat">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Chat
                                    </a>
                                </li>
                                <li>
                                    <a href="notifications.html" title="Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="messaging.html" title="Messaging">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Messaging
                                    </a>
                                </li>
                                <li>
                                    <a href="progress_bars.html" title="Progress">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Progress
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Pages">
                                <i class="glyph-icon icon-folder-open"></i>
                                Pages
                            </a>
                            <ul>
                                <li>
                                    <a href="grid.html" title="Grid Layouts">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Grid Layouts
                                    </a>
                                </li>
                                <li>
                                    <a href="helper_classes.html" title="Helpers">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Helpers
                                    </a>
                                </li>
                                <li>
                                    <a href="login.html" title="Login">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Login example 1
                                    </a>
                                </li>
                                <li>
                                    <a href="login-alt.html" title="Login">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Login example 2
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Widgets">
                                <i class="glyph-icon icon-tags"></i>
                                Widgets
                            </a>
                            <ul>
                                <li>
                                    <a href="tabs.html" title="Tabs">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Tabs
                                    </a>
                                </li>
                                <li>
                                    <a href="accordions.html" title="Accordions">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Accordions
                                    </a>
                                </li>
                                <li>
                                    <a href="datepicker.html" title="Datepicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Datepicker
                                    </a>
                                </li>
                                <li>
                                    <a href="timepicker.html" title="Timepicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Timepicker
                                    </a>
                                </li>
                                <li>
                                    <a href="colorpicker.html" title="Colorpicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Colorpicker
                                    </a>
                                </li>
                                <li>
                                    <a href="slider.html" title="Sliders">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sliders
                                    </a>
                                </li>
                                <li>
                                    <a href="jgrowl_notifications.html" title="JGrowl Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        JGrowl Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="noty_notifications.html" title="Noty Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Noty Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="modal_windows.html" title="Modal Windows">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Modal Windows
                                    </a>
                                </li>
                                <li>
                                    <a href="tooltips.html" title="Tooltips">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Tooltips
                                    </a>
                                </li>
                                <li>
                                    <a href="popovers.html" title="Popovers">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Popovers
                                    </a>
                                </li>
                                <li>
                                    <a href="sortable.html" title="Sortable Elements">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sortable Elements
                                    </a>
                                </li>
                                <li>
                                    <a href="dropdown_menus.html" title="Dropdown Menus">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dropdown Menus
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Elements">
                                <i class="glyph-icon icon-laptop"></i>
                                Elements
                            </a>
                            <ul>
                                <li>
                                    <a href="content_boxes.html" title="Content Boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Content Boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="response_messages.html" title="Response Messages">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Response Messages
                                    </a>
                                </li>
                                <li>
                                    <a href="badges.html" title="Badges &amp; Labels">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Badges &amp; Labels
                                    </a>
                                </li>
                                <li>
                                    <a href="overlays.html" title="Overlays">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Overlays
                                    </a>
                                </li>
                                <li>
                                    <a href="navigation_menus.html" title="Navigation Menus">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Navigation Menus
                                    </a>
                                </li>
                                <li>
                                    <a href="icons.html" title="Icons">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Icons
                                    </a>
                                </li>
                                <li>
                                    <a href="buttons.html" title="Buttons">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Buttons
                                    </a>
                                </li>
                                <li>
                                    <a href="pagination.html" title="Pagination">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Pagination
                                    </a>
                                </li>
                                <li>
                                    <a href="typography.html" title="Typography">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Typography
                                    </a>
                                </li>
                                <li>
                                    <a href="animations.html" title="Animations">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Animations
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Charts">
                                <i class="glyph-icon icon-bar-chart"></i>
                                Charts
                            </a>
                            <ul>
                                <li>
                                    <a href="charts_piegauges.html" title="Pie Gauges">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Pie Gauges
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_justgage.html" title="JustGage">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        JustGage
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_sparklines.html" title="Sparklines">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sparklines
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_morris.html" title="Morris Charts">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Morris Charts
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Tables">
                                <i class="glyph-icon icon-table"></i>
                                Tables
                            </a>
                            <ul>
                                <li>
                                    <a href="tables.html" title="Normal tables">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Normal tables
                                    </a>
                                </li>
                                <li>
                                    <a href="tables_dynamic.html" title="Dynamic tables">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dynamic tables
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Forms">
                                <i class="glyph-icon icon-reorder"></i>
                                Forms
                            </a>
                            <ul>
                                <li>
                                    <a href="forms.html" title="Layouts &amp; Elements">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Layouts &amp; Elements
                                    </a>
                                </li>
                                <li>
                                    <a href="forms_validation.html" title="Forms validation">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Forms validation
                                    </a>
                                </li>
                                <li>
                                    <a href="form_wizard.html" title="Form wizard">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Form wizard
                                    </a>
                                </li>
                                <li>
                                    <a href="forms_inline.html" title="Inline editor">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Inline editor
                                    </a>
                                </li>
                                <li>
                                    <a href="image_editor.html" title="Image crop">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Image crop
                                    </a>
                                </li>
                                <li>
                                    <a href="file_upload.html" title="Files uploader">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Files uploader
                                    </a>
                                </li>
                                <li>
                                    <a href="dropzone_uploader.html" title="Dropzone uploader">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dropzone uploader
                                    </a>
                                </li>
                            </ul>
                        </li>
<!--                         <li>
                            <a href="javascript:;" title="Maps">
                                <i class="glyph-icon icon-map-marker"></i>
                                Maps
                            </a>
                            <ul>
                                <li>
                                    <a href="google_maps.html" title="Google Maps">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Google maps
                                    </a>
                                </li>
                                <li>
                                    <a href="vector_maps.html" title="Vector maps">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Vector maps
                                    </a>
                                </li>
                            </ul>
                        </li> -->
                        <li>
                            <a href="javascript:;" title="Help &amp; Support">
                                <i class="glyph-icon icon-book"></i>
                                Help &amp; Support
                            </a>
                            <ul>
                                <li>
                                    <a href="docs.html" title="Getting started guide">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Getting started guide
                                    </a>
                                </li>
                                <li>
                                    <a href="http://agileui.com/support-forums" title="Support forums">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Support forums
                                    </a>
                                </li>

                            </ul>
                        </li>
                    </ul>
                    <div class="divider mrg5T mobile-hidden"></div>
                    <div class="text-center mobile-hidden">
                        <div class="button-group display-inline">
                            <a href="javascript:;" class="btn medium bg-green tooltip-button" data-placement="top" title="Messages">
                                <i class="glyph-icon icon-flag"></i>
                            </a>
                            <a href="javascript:;" class="btn medium bg-green tooltip-button" data-placement="top" title="Mailbox">
                                <i class="glyph-icon icon-inbox"></i>
                            </a>
                            <a href="javascript:;" class="btn medium bg-green tooltip-button" data-placement="top" title="Content">
                                <i class="glyph-icon icon-hdd"></i>
                            </a>
                        </div>

                    </div>
                </div>

            </div><!-- #page-sidebar -->
            <div id="page-content-wrapper">
                <div id="page-title">

<h3>
    Forms
    <small>
        Choose between tons of combinations &amp; possibilites that our themes offer to create all kinds of form elements &amp; layouts.
    </small>
</h3>
                    <div id="breadcrumb-right">
                        <div id="sidebar-search">
                            <input type="text" placeholder="Search..." class="autocomplete-input input tooltip-button" data-placement="bottom" title="Type &apos;jav&apos; to see the available tags..." id="" name="" />
                            <i class="glyph-icon icon-search"></i>
                        </div>
                        <div class="float-right">
                            <a href="javascript:;" class="btn medium bg-white tooltip-button black-modal-60 mrg5R" data-placement="bottom" title="Open modal window">
                                <span class="button-content">
                                    <i class="glyph-icon icon-question"></i>
                                </span>
                            </a>

                            <div class="dropdown">
                                <a href="javascript:;" class="btn medium bg-white" title="Example dropdown" data-toggle="dropdown">
                                    <span class="button-content">
                                        <i class="glyph-icon icon-cog float-left"></i>
                                        <i class="glyph-icon icon-caret-down float-right"></i>
                                    </span>
                                </a>
                                <div class="dropdown-menu pad0A float-right">
                                    <div class="medium-box">
                                        <div class="bg-gray text-transform-upr font-size-12 font-bold font-gray-dark pad10A">Form example</div>
                                        <div class="pad10A">
                                            <p class="font-gray-dark pad0B">This <span class="label bg-blue-alt">dropdown box</span> uses the Twitter Bootstrap dropdown plugin.</p>
                                            <div class="divider mrg10T mrg10B"></div>

                                                <form id="demo-form" action="" class="col-md-12" method="" />
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="">
                                                                Name:
                                                                <span class="required">*</span>
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <input type="text" id="email" name="email" data-type="email" data-trigger="change" data-required="true" class="parsley-validated" />
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="">
                                                                Email:
                                                                <span class="required">*</span>
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <input type="text" id="email" name="email" data-type="email" data-trigger="change" data-required="true" class="parsley-validated" />
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="">
                                                                Website:
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <input type="text" id="website" name="website" data-trigger="change" data-type="url" class="parsley-validated" />
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="" class="label-description">
                                                                Message:
                                                                <span>20 chars min, 200 max</span>
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]" class="parsley-validated"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="divider"></div>
                                                    <div class="form-row">
                                                        <input type="hidden" name="superhidden" id="superhidden" />
                                                        <div class="form-input col-md-8 col-md-offset-4">
                                                            <a href="javascript:;" class="btn medium primary-bg radius-all-4" id="demo-form-valid" onclick="javascript:$(&apos;#demo-form&apos;).parsley( &apos;validate&apos; );" title="Validate!">
                                                                <span class="button-content">
                                                                    Validate the form above
                                                                </span>
                                                            </a>
                                                        </div>
                                                    </div>

                                                </form>

                                        </div>

                                        <div class="bg-black font-size-12 font-orange pad10A mrg5L mrg5R">Custom header example</div>
                                        <div class="pad15A">
                                            <p class="font-green text-center font-size-14 pad0B">Fides Admin comes with powerful helpers that you can use to create virtually any style you want. Read the documentation about helper classes to find out more!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
</div><!-- #page-title -->
<div id="page-content">



<h3>Layouts</h3>
<p class="font-gray-dark">
    Use the grid system to create form layouts. You can also control the width of the labels and the input wrapper and the number of form columns.
</p>

<div class="infobox warning-bg">
    <p><i class="glyph-icon icon-exclamation mrg10R"></i>To view the available grid system options &amp; configurations you can visit the <a href="grid.html" target="_blank" title="Fides Admin Grid System documentation">Fides Admin Grid System documentation</a> page.</p>
</div>

<div class="example-box">
    <div class="example-code">

        <form action="" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Full width row:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input placeholder=".col-md-12" type="text" name="" id="" />
                </div>
            </div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Two equal columns:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="row">
                        <div class="col-md-6">
                            <input placeholder=".col-md-6" type="text" name="" id="" />
                        </div>
                        <div class="col-md-6">
                            <input placeholder=".col-md-6" type="text" name="" id="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Three equal columns:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="row">
                        <div class="col-md-4">
                            <input placeholder=".col-md-4" type="text" name="" id="" />
                        </div>
                        <div class="col-md-4">
                            <input placeholder=".col-md-4" type="text" name="" id="" />
                        </div>
                        <div class="col-md-4">
                            <input placeholder=".col-md-4" type="text" name="" id="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Four equal columns:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="row">
                        <div class="col-md-3">
                            <input placeholder=".col-md-3" type="text" name="" id="" />
                        </div>
                        <div class="col-md-3">
                            <input placeholder=".col-md-3" type="text" name="" id="" />
                        </div>
                        <div class="col-md-3">
                            <input placeholder=".col-md-3" type="text" name="" id="" />
                        </div>
                        <div class="col-md-3">
                            <input placeholder=".col-md-3" type="text" name="" id="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Two columns I:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="row">
                        <div class="col-md-4">
                            <input placeholder=".col-md-4" type="text" name="" id="" />
                        </div>
                        <div class="col-md-8">
                            <input placeholder=".col-md-8" type="text" name="" id="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Two columns II:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="row">
                        <div class="col-md-8">
                            <input placeholder=".col-md-8" type="text" name="" id="" />
                        </div>
                        <div class="col-md-4">
                            <input placeholder=".col-md-4" type="text" name="" id="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Five columns:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="row">
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Four columns I:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="row">
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-6">
                            <input placeholder=".col-md-6" type="text" name="" id="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Four columns II:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="row">
                        <div class="col-md-6">
                            <input placeholder=".col-md-6" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                        <div class="col-md-2">
                            <input placeholder=".col-md-2" type="text" name="" id="" />
                        </div>
                    </div>
                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Horizontal labels</h3>
<p class="font-gray-dark">
    Using the grid system you can control the position of the labels. The form example below has the <b>col-md-6</b> which sets the width to 50% and <b>center-margin</b> which centers it.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-6 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Horizontal label:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input placeholder=".col-md-12" type="text" name="" id="" />
                </div>
            </div>

            <div class="form-row pad0B">
                <div class="form-label col-md-2">
                    <label for="">
                        Horizontal label:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Vertical labels</h3>
<p class="font-gray-dark">
    For making labels vertical you have two options, either use the apropiate grid <b>.col-</b> class or wrap the form in the <b>form-vertical</b> class.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-6 form-vertical center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Vertical label:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input placeholder=".col-md-12" type="text" name="" id="" />
                </div>
            </div>

            <div class="form-row pad0B">
                <div class="form-label col-md-2">
                    <label for="">
                        Vertical label:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>

        </form>

    </div>
    
</div>


<h3>Right aligned labels</h3>
<p class="font-gray-dark">
    Both the horizontal and vertical form layouts can have the label texts left or right aligned. By default the label text is left aligned. To right align it you need to either add the <b>text-right</b> helper class to it or by adding the <b>form-label-right</b> class to an element that wraps multiple labels.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-6 form-label-right center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-4">
                    <label for="">
                        Horizontal label:
                    </label>
                </div>
                <div class="form-input col-md-7 col-md-offset-1">
                    <input placeholder=".col-md-12" type="text" name="" id="" />
                </div>
            </div>

            <div class="form-row">
                <div class="form-label col-md-4">
                    <label for="">
                        Another label example:
                    </label>
                </div>
                <div class="form-input col-md-7 col-md-offset-1">
                    <select id="" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>

            <div class="form-row pad0B">
                <div class="form-label col-md-4">
                    <label for="">
                        Horizontal label:
                    </label>
                </div>
                <div class="form-input col-md-7 col-md-offset-1">
                    <input placeholder=".col-md-12" type="text" name="" id="" />
                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Labels descriptions</h3>
<p class="font-gray-dark">
    Both vertical and horizontal labels can have descriptions. You can change the color of the descriptions by using the core font color helpers.
</p>

<div class="example-box">
    <div class="example-code clearfix">

         <form action="" class="col-md-6 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-4">
                    <label for="" class="label-description">
                        Horizontal label:
                        <span>Labels can have inline descriptions</span>
                    </label>
                </div>
                <div class="form-input col-md-8">
                    <input placeholder=".col-md-12" type="text" name="" id="" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-4">
                    <label for="" class="label-description">
                        Horizontal label:
                        <span class="font-green opacity-100">Green label description</span>
                    </label>
                </div>
                <div class="form-input col-md-8">
                    <input placeholder=".col-md-12" type="text" name="" id="" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-4">
                    <label for="" class="label-description">
                        Horizontal label:
                        <span class="font-red">Red label description</span>
                    </label>
                </div>
                <div class="form-input col-md-8">
                    <input placeholder=".col-md-12" type="text" name="" id="" />
                </div>
            </div>

            <div class="divider"></div>

            <div class="form-row form-vertical pad0B row">
                <div class="form-label col-md-2">
                    <label for="" class="label-description">
                        Vertical label:
                        <span class="float-right">Labels can have inline descriptions</span>
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Select inputs</h3>
<p class="font-gray-dark">
    Select inputs can have different sizes and styling. You can also have select inputs that use different styling from the browser default one.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Default:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Disabled:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" name="" disabled="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
            <div class="divider"></div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Full width:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Large:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" class="col-md-10" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Medium:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" class="col-md-8" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Small:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" class="col-md-6" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
            <div class="form-row pad0B row">
                <div class="form-label col-md-2">
                    <label for="">
                        X-Small:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" class="col-md-4" name="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
        </form>

    </div>
    
</div>

<h3>Custom select inputs</h3>
<p class="font-gray-dark">
    Custom select inputs maintain the dropdown browser styling.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Default:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" name="" class="custom-select">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
            <div class="form-row pad0B row">
                <div class="form-label col-md-2">
                    <label for="">
                        Disabled:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select id="" name="" class="custom-select" disabled="">
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
        </form>

    </div>
    
</div>

<h3>Chosen selects</h3>
<p class="font-gray-dark">
    Chosen select inputs completly restyles the select inputs to be more user-friendly and have additional options.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Default:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select data-placeholder="Choose a Country..." class="chosen-select">
                        <option value="" /> 
                        <option value="United States" />United States 
                        <option value="United Kingdom" />United Kingdom 
                        <option value="Afghanistan" />Afghanistan 
                        <option value="Aland Islands" />Aland Islands 
                        <option value="Albania" />Albania 
                        <option value="Algeria" />Algeria 
                        <option value="American Samoa" />American Samoa 
                        <option value="Andorra" />Andorra 
                        <option value="Angola" />Angola 
                        <option value="Anguilla" />Anguilla 
                        <option value="Antarctica" />Antarctica 
                        <option value="Antigua and Barbuda" />Antigua and Barbuda 
                        <option value="Argentina" />Argentina 
                        <option value="Armenia" />Armenia 
                        <option value="Aruba" />Aruba 
                        <option value="Australia" />Australia 
                        <option value="Austria" />Austria 
                        <option value="Azerbaijan" />Azerbaijan 
                        <option value="Bahamas" />Bahamas 
                        <option value="Bahrain" />Bahrain 
                        <option value="Bangladesh" />Bangladesh 
                        <option value="Barbados" />Barbados 
                        <option value="Belarus" />Belarus 
                        <option value="Belgium" />Belgium 
                        <option value="Belize" />Belize 
                        <option value="Benin" />Benin 
                        <option value="Bermuda" />Bermuda 
                        <option value="Bhutan" />Bhutan
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Groups:
                    </label>
                </div>
                <div class="form-input col-md-10">

                    <select data-placeholder="Your Favorite Football Team" class="chosen-select">
                        <option value="" />
                            <optgroup label="NFC EAST">
                              <option />Dallas Cowboys
                              <option />New York Giants
                              <option />Philadelphia Eagles
                              <option />Washington Redskins
                            </optgroup>
                            <optgroup label="NFC NORTH">
                              <option />Chicago Bears
                              <option />Detroit Lions
                              <option />Green Bay Packers
                              <option />Minnesota Vikings
                            </optgroup>
                            <optgroup label="NFC SOUTH">
                              <option />Atlanta Falcons
                              <option />Carolina Panthers
                              <option />New Orleans Saints
                              <option />Tampa Bay Buccaneers
                            </optgroup>
                            <optgroup label="NFC WEST">
                              <option />Arizona Cardinals
                              <option />St. Louis Rams
                              <option />San Francisco 49ers
                              <option />Seattle Seahawks
                            </optgroup>
                            <optgroup label="AFC EAST">
                              <option />Buffalo Bills
                              <option />Miami Dolphins
                              <option />New England Patriots
                              <option />New York Jets
                            </optgroup>
                            <optgroup label="AFC NORTH">
                              <option />Baltimore Ravens
                              <option />Cincinnati Bengals
                              <option />Cleveland Browns
                              <option />Pittsburgh Steelers
                            </optgroup>
                            <optgroup label="AFC SOUTH">
                              <option />Houston Texans
                              <option />Indianapolis Colts
                              <option />Jacksonville Jaguars
                              <option />Tennessee Titans
                            </optgroup>
                            <optgroup label="AFC WEST">
                              <option />Denver Broncos
                              <option />Kansas City Chiefs
                              <option />Oakland Raiders
                              <option />San Diego Chargers
                        </optgroup>
                    </select>
                </div>
            </div>
            <div class="form-row pad0B row">
                <div class="form-label col-md-2">
                    <label for="">
                        Disabled:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select data-placeholder="Choose a Country..." disabled="" class="chosen-select">
                        <option value="" /> 
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
        </form>

    </div>
    
</div>

<h3>Chosen multiple select</h3>
<p class="font-gray-dark">
    Chosen multiple selects transforms the regular multiselect box into in input with tags maintaing the same functionality.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Default:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select data-placeholder="Choose a Country..." multiple="" class="chosen-select">
                        <option value="" /> 
                        <option value="United States" />United States 
                        <option value="United Kingdom" />United Kingdom 
                        <option value="Afghanistan" />Afghanistan 
                        <option value="Aland Islands" />Aland Islands 
                        <option value="Albania" />Albania 
                        <option value="Algeria" />Algeria 
                        <option value="American Samoa" />American Samoa 
                        <option value="Andorra" />Andorra 
                        <option value="Angola" />Angola 
                        <option value="Anguilla" />Anguilla 
                        <option value="Antarctica" />Antarctica 
                        <option value="Antigua and Barbuda" />Antigua and Barbuda 
                        <option value="Argentina" />Argentina 
                        <option value="Armenia" />Armenia 
                        <option value="Aruba" />Aruba 
                        <option value="Australia" />Australia 
                        <option value="Austria" />Austria 
                        <option value="Azerbaijan" />Azerbaijan 
                        <option value="Bahamas" />Bahamas 
                        <option value="Bahrain" />Bahrain 
                        <option value="Bangladesh" />Bangladesh 
                        <option value="Barbados" />Barbados 
                        <option value="Belarus" />Belarus 
                        <option value="Belgium" />Belgium 
                        <option value="Belize" />Belize 
                        <option value="Benin" />Benin 
                        <option value="Bermuda" />Bermuda 
                        <option value="Bhutan" />Bhutan
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Groups:
                    </label>
                </div>
                <div class="form-input col-md-10">

                    <select data-placeholder="Your Favorite Football Team" multiple="" class="chosen-select">
                        <option value="" />
                            <optgroup label="NFC EAST">
                              <option />Dallas Cowboys
                              <option />New York Giants
                              <option />Philadelphia Eagles
                              <option />Washington Redskins
                            </optgroup>
                            <optgroup label="NFC NORTH">
                              <option />Chicago Bears
                              <option />Detroit Lions
                              <option />Green Bay Packers
                              <option />Minnesota Vikings
                            </optgroup>
                            <optgroup label="NFC SOUTH">
                              <option />Atlanta Falcons
                              <option />Carolina Panthers
                              <option />New Orleans Saints
                              <option />Tampa Bay Buccaneers
                            </optgroup>
                            <optgroup label="NFC WEST">
                              <option />Arizona Cardinals
                              <option />St. Louis Rams
                              <option />San Francisco 49ers
                              <option />Seattle Seahawks
                            </optgroup>
                            <optgroup label="AFC EAST">
                              <option />Buffalo Bills
                              <option />Miami Dolphins
                              <option />New England Patriots
                              <option />New York Jets
                            </optgroup>
                            <optgroup label="AFC NORTH">
                              <option />Baltimore Ravens
                              <option />Cincinnati Bengals
                              <option />Cleveland Browns
                              <option />Pittsburgh Steelers
                            </optgroup>
                            <optgroup label="AFC SOUTH">
                              <option />Houston Texans
                              <option />Indianapolis Colts
                              <option />Jacksonville Jaguars
                              <option />Tennessee Titans
                            </optgroup>
                            <optgroup label="AFC WEST">
                              <option />Denver Broncos
                              <option />Kansas City Chiefs
                              <option />Oakland Raiders
                              <option />San Diego Chargers
                        </optgroup>
                    </select>
                </div>
            </div>
            <div class="form-row pad0B row">
                <div class="form-label col-md-2">
                    <label for="">
                        Disabled:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <select data-placeholder="Choose a Country..." multiple="" disabled="" class="chosen-select">
                        <option value="" /> 
                        <option />Option 1
                        <option />Option 2
                        <option />Option 3
                        <option />Option 4
                    </select>
                </div>
            </div>
        </form>

    </div>
    
</div>

<h3>Textareas</h3>
<p class="font-gray-dark">
    Textareas can have 4 different height sizes that can be set by adding a CSS helper class to the actual textarea. Available height sizes are: <b>small-textarea</b>, <b>medium-textarea</b>, <b>large-textarea</b> and <b>textarea-autosize</b> <i>- sets the height based on the text you write inside</i>. For widths you can use the grid system helper classes as shown in the examples below.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        No resize:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="textarea-no-resize"></textarea>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Character count:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="character-count"></textarea>
                    <div class="character-remaining clear input-description">125 characters left</div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Autoresize:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="textarea-autosize"></textarea>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Disabled:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" disabled=""></textarea>
                </div>
            </div>
            <div class="divider"></div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Large:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="col-md-10"></textarea>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Medium:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="col-md-8"></textarea>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Small:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="col-md-6"></textarea>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        X-Small:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="col-md-4"></textarea>
                </div>
            </div>
            <div class="divider"></div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Small:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="small-textarea"></textarea>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Medium:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="medium-textarea"></textarea>
                </div>
            </div>
            <div class="form-row pad0B row">
                <div class="form-label col-md-2">
                    <label for="">
                        Large:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <textarea name="" id="" class="large-textarea"></textarea>
                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Checkbox inputs</h3>
<p class="font-gray-dark">
    Checkbox inputs can have a vertical or horizontal orientation.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Horizontal Checkboxes:
                    </label>
                </div>
                <div class="form-checkbox-radio col-md-10">
                    <input type="checkbox" name="" id="" />
                    <label for="">Normal</label>

                    <input type="checkbox" name="" id="" checked="" />
                    <label for="">Normal checked</label>

                    <input disabled="" type="checkbox" name="" id="" />
                    <label for="">Disabled</label>

                    <input disabled="" type="checkbox" name="" id="" checked="" />
                    <label for="">Disabled checked</label>

                </div>
            </div>
            <div class="form-row pad0B">
                <div class="form-label col-md-2">
                    <label for="">
                        Vertical Checkboxes:
                    </label>
                </div>
                <div class="form-checkbox-radio col-md-10">
                    <div class="checkbox-radio">
                        <input type="checkbox" name="" id="" />
                        <label for="">Normal</label>
                    </div>
                    <div class="checkbox-radio">
                        <input type="checkbox" name="" id="" checked="" />
                        <label for="">Normal checked</label>
                    </div>
                    <div class="checkbox-radio">
                        <input disabled="" type="checkbox" name="" id="" />
                        <label for="">Disabled</label>
                    </div>
                    <div class="checkbox-radio">
                        <input disabled="" type="checkbox" name="" id="" checked="" />
                        <label for="">Disabled checked</label>
                    </div>
                </div>
            </div>
        </form>

    </div>
    
</div>

<h3>Custom checkbox inputs</h3>
<p class="font-gray-dark">
    Custom checkbox inputs have a different styling than the browser default checkbox styling. You can create a custom checkbox input by adding the <b>custom-checkbox</b> class to it.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Horizontal Checkboxes:
                    </label>
                </div>
                <div class="form-checkbox-radio col-md-10">
                    <input type="checkbox" class="custom-checkbox" name="" id="" />
                    <label for="">Normal</label>

                    <input type="checkbox" class="custom-checkbox" name="" id="" checked="" />
                    <label for="">Normal checked</label>

                    <input disabled="" type="checkbox" class="custom-checkbox" name="" id="" />
                    <label for="">Disabled</label>

                    <input disabled="" type="checkbox" class="custom-checkbox" name="" id="" checked="" />
                    <label for="">Disabled checked</label>

                </div>
            </div>
            <div class="form-row pad0B">
                <div class="form-label col-md-2">
                    <label for="">
                        Vertical Checkboxes:
                    </label>
                </div>
                <div class="form-checkbox-radio col-md-10">
                    <div class="checkbox-radio">
                        <input type="checkbox" class="custom-checkbox" name="" id="" />
                        <label for="">Normal</label>
                    </div>
                    <div class="checkbox-radio">
                        <input type="checkbox" class="custom-checkbox" name="" id="" checked="" />
                        <label for="">Normal checked</label>
                    </div>
                    <div class="checkbox-radio">
                        <input disabled="" type="checkbox" class="custom-checkbox" name="" id="" />
                        <label for="">Disabled</label>
                    </div>
                    <div class="checkbox-radio">
                        <input disabled="" type="checkbox" class="custom-checkbox" name="" id="" checked="" />
                        <label for="">Disabled checked</label>
                    </div>
                </div>
            </div>
        </form>

    </div>
    
</div>

<h3>Radio inputs</h3>
<p class="font-gray-dark">
    Radio inputs can have a vertical or horizontal orientation.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Horizontal Radios:
                    </label>
                </div>
                <div class="form-checkbox-radio col-md-10">
                    <input type="radio" name="" id="" />
                    <label for="">Normal</label>

                    <input type="radio" name="" id="" checked="" />
                    <label for="">Normal checked</label>

                    <input disabled="" type="radio" name="" id="" />
                    <label for="">Disabled</label>

                    <input disabled="" type="radio" name="" id="" checked="" />
                    <label for="">Disabled checked</label>

                </div>
            </div>
            <div class="form-row pad0B">
                <div class="form-label col-md-2">
                    <label for="">
                        Vertical Radios:
                    </label>
                </div>
                <div class="form-checkbox-radio col-md-10">
                    <div class="checkbox-radio">
                        <input type="radio" name="" id="" />
                        <label for="">Normal</label>
                    </div>
                    <div class="checkbox-radio">
                        <input type="radio" name="" id="" checked="" />
                        <label for="">Normal checked</label>
                    </div>
                    <div class="checkbox-radio">
                        <input disabled="" type="radio" name="" id="" />
                        <label for="">Disabled</label>
                    </div>
                    <div class="checkbox-radio">
                        <input disabled="" type="radio" name="" id="" checked="" />
                        <label for="">Disabled checked</label>
                    </div>
                </div>
            </div>
        </form>

    </div>
    
</div>

<h3>Custom radio inputs</h3>
<p class="font-gray-dark">
    Custom radio inputs have a different styling than the browser default radio input styling. You can create a custom radio input by adding the <b>custom-radio</b> class to it.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Horizontal Radios:
                    </label>
                </div>
                <div class="form-checkbox-radio col-md-10">
                    <input type="radio" class="custom-radio" name="" id="" />
                    <label for="">Normal</label>

                    <input type="radio" class="custom-radio" name="" id="" checked="" />
                    <label for="">Normal checked</label>

                    <input disabled="" type="radio" class="custom-radio" name="" id="" />
                    <label for="">Disabled</label>

                    <input disabled="" type="radio" class="custom-radio" name="" id="" checked="" />
                    <label for="">Disabled checked</label>

                </div>
            </div>
            <div class="form-row pad0B">
                <div class="form-label col-md-2">
                    <label for="">
                        Vertical Radios:
                    </label>
                </div>
                <div class="form-checkbox-radio col-md-10">
                    <div class="checkbox-radio">
                        <input type="radio" class="custom-radio" name="" id="" />
                        <label for="">Normal</label>
                    </div>
                    <div class="checkbox-radio">
                        <input type="radio" class="custom-radio" name="" id="" checked="" />
                        <label for="">Normal checked</label>
                    </div>
                    <div class="checkbox-radio">
                        <input disabled="" type="radio" class="custom-radio" name="" id="" />
                        <label for="">Disabled</label>
                    </div>
                    <div class="checkbox-radio">
                        <input disabled="" type="radio" class="custom-radio" name="" id="" checked="" />
                        <label for="">Disabled checked</label>
                    </div>
                </div>
            </div>
        </form>

    </div>
    
</div>

<h3>Text inputs</h3>
<p class="font-gray-dark">
    Text inputs can have different styles &amp; sizes, multiple left/right icons and buttons. To control text inputs widths you can use the grid system helper classes as shown in the examples below.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Full width:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input placeholder="" type="text" name="" id="" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Large:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input placeholder=".col-md-10" class="col-md-10" type="text" name="" id="" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Medium:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input placeholder=".col-md-8" class="col-md-8" type="text" name="" id="" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Small:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input placeholder=".col-md-6" class="col-md-6" type="text" name="" id="" />
                </div>
            </div>

            <div class="divider"></div>

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Autocomplete:
                        <span class="required">*</span>
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input type="text" class="col-md-6 autocomplete-input" />
                </div>
            </div>
            <div class="form-row pad0B">
                <div class="form-label col-md-2">
                    <label for="">
                        Spinner:
                        <span class="required">*</span>
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input class="spinner-input" name="" id="" />
                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Icons</h3>
<p class="font-gray-dark">
    You can append icons to text inputs to the left, right or both.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />

            <div class="row">
                <div class="col-md-6">

                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .primary-bg
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper">
                                <div class="input-append primary-bg">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-left">
                                    <input type="text" placeholder="Left icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .ui-state-default
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper">
                                <div class="input-append ui-state-default">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-left">
                                    <input type="text" placeholder="Left icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="divider"></div>

                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-white
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-gray">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-left">
                                    <input type="text" placeholder="Left icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-gray
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-gray">
                                    12.
                                </div>
                                <div class="append-left">
                                    <input type="text" placeholder="Left text" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-gray-alt
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-gray-alt">
                                    $
                                </div>
                                <div class="append-left">
                                    <input type="text" placeholder="Left text" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-black
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-black">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-left">
                                    <input type="text" placeholder="Left icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-purple
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-purple">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-left">
                                    <input type="text" placeholder="Left icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row pad0B">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-green
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-green">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-left">
                                    <input type="text" placeholder="Left icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-6">

                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .primary-bg
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper input-append-right">
                                <div class="input-append primary-bg">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-right">
                                    <input type="text" placeholder="Right icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .ui-state-default
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper input-append-right">
                                <div class="input-append ui-state-default">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-right">
                                    <input type="text" placeholder="Right icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="divider"></div>

                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-white
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper input-append-right">
                                <div class="input-append bg-gray">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-right">
                                    <input type="text" placeholder="Right icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-gray
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper input-append-right">
                                <div class="input-append bg-gray">
                                    12.
                                </div>
                                <div class="append-right">
                                    <input type="text" placeholder="Right text" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-gray-alt
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper input-append-right">
                                <div class="input-append bg-gray-alt">
                                    $
                                </div>
                                <div class="append-right">
                                    <input type="text" placeholder="Right text" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-black
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper input-append-right">
                                <div class="input-append bg-black">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-right">
                                    <input type="text" placeholder="Right icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-purple
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper input-append-right">
                                <div class="input-append bg-purple">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-right">
                                    <input type="text" placeholder="Right icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row pad0B">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-green
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="input-append-wrapper input-append-right">
                                <div class="input-append bg-green">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="append-right">
                                    <input type="text" placeholder="Right icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Icons inside</h3>
<p class="font-gray-dark">
    You can append icons to text inputs to the left, right or both.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />

            <div class="row">
                <div class="col-md-6">

                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .primary-bg
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon">
                                <i class="glyph-icon icon-lock primary-bg"></i>
                                <input type="text" placeholder="Inside left icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .ui-state-default
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon">
                                <i class="glyph-icon icon-lock ui-state-default"></i>
                                <input type="text" placeholder="Inside left icon" name="" id="" />
                            </div>
                        </div>
                    </div>

                    <div class="divider"></div>

                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-white
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon">
                                <i class="glyph-icon icon-lock bg-white"></i>
                                <input type="text" placeholder="Inside left icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-yellow
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon">
                                <i class="glyph-icon icon-lock bg-yellow"></i>
                                <input type="text" placeholder="Inside left icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-red
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon">
                                <i class="glyph-icon icon-lock bg-red"></i>
                                <input type="text" placeholder="Inside left icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-black
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon">
                                <i class="glyph-icon icon-lock bg-black"></i>
                                <input type="text" placeholder="Inside left icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-azure
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon">
                                <i class="glyph-icon icon-lock bg-azure"></i>
                                <input type="text" placeholder="Inside left icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row pad0B">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-gray
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon">
                                <i class="glyph-icon icon-lock bg-gray"></i>
                                <input type="text" placeholder="Inside left icon" name="" id="" />
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-6">

                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .primary-bg
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon icon-right">
                                <i class="glyph-icon icon-lock primary-bg"></i>
                                <input type="text" placeholder="Inside right icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .ui-state-default
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon icon-right">
                                <i class="glyph-icon icon-lock ui-state-default"></i>
                                <input type="text" placeholder="Inside right icon" name="" id="" />
                            </div>
                        </div>
                    </div>

                    <div class="divider"></div>

                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-white
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon icon-right">
                                <i class="glyph-icon icon-lock bg-white"></i>
                                <input type="text" placeholder="Inside right icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-yellow
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon icon-right">
                                <i class="glyph-icon icon-lock bg-yellow"></i>
                                <input type="text" placeholder="Inside right icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-red
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon icon-right">
                                <i class="glyph-icon icon-lock bg-red"></i>
                                <input type="text" placeholder="Inside right icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-black
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon icon-right">
                                <i class="glyph-icon icon-lock bg-black"></i>
                                <input type="text" placeholder="Inside right icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-azure
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon icon-right">
                                <i class="glyph-icon icon-lock bg-azure"></i>
                                <input type="text" placeholder="Inside right icon" name="" id="" />
                            </div>
                        </div>
                    </div>
                    <div class="form-row pad0B">
                        <div class="form-label col-md-3">
                            <label for="">
                                .bg-gray
                            </label>
                        </div>
                        <div class="form-input col-md-9">
                            <div class="form-input-icon icon-right">
                                <i class="glyph-icon icon-lock bg-gray"></i>
                                <input type="text" placeholder="Inside right icon" name="" id="" />
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Multiple icons</h3>
<p class="font-gray-dark">
    Text inputs can have more than one icon appended to them. Check the examples below.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />

            <div class="row">
                <div class="col-md-4">

                    <div class="form-row">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <div class="input-append primary-bg">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="form-input-icon append-left">
                                    <i class="glyph-icon icon-lock font-gray"></i>
                                    <input type="text" placeholder="Left icon and left inside icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <div class="input-append ui-state-default">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="form-input-icon append-left">
                                    <i class="glyph-icon icon-lock bg-blue-alt"></i>
                                    <input type="text" placeholder="Left icon and left inside icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row pad0B">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-orange">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="form-input-icon append-left">
                                    <i class="glyph-icon icon-lock bg-purple"></i>
                                    <input type="text" placeholder="Left icon and left inside icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-4">

                    <div class="form-row">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-black">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="form-input-icon icon-right append-left">
                                    <i class="glyph-icon icon-lock bg-gray-alt"></i>
                                    <input type="text" placeholder="Left icon and right inside icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <div class="input-append ui-state-default">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="form-input-icon icon-right append-left">
                                    <i class="glyph-icon icon-lock font-red"></i>
                                    <input type="text" placeholder="Left icon and right inside icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row pad0B">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-blue">
                                    <i class="glyph-icon icon-lock"></i>
                                </div>
                                <div class="form-input-icon icon-right append-left">
                                    <i class="glyph-icon icon-lock bg-black"></i>
                                    <input type="text" placeholder="Left icon and right inside icon" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-4">

                    <div class="form-row">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-gray">
                                    <i class="glyph-icon icon-lock font-green"></i>
                                </div>
                                <div class="form-input-icon icon-right append-left">
                                    <i class="glyph-icon icon-lock font-blue"></i>
                                    <input type="text" placeholder="Left icon and right inside icon without background" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-gray">
                                    <i class="glyph-icon icon-lock font-gray"></i>
                                </div>
                                <div class="form-input-icon icon-right append-left">
                                    <i class="glyph-icon icon-lock font-blue opacity-60"></i>
                                    <input type="text" placeholder="Left icon and right inside icon without background" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row pad0B">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <div class="input-append bg-gray">
                                    <i class="glyph-icon icon-lock font-orange"></i>
                                </div>
                                <div class="form-input-icon icon-right append-left">
                                    <i class="glyph-icon icon-lock font-black"></i>
                                    <input type="text" placeholder="Left icon and right inside icon without background" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Inputs with buttons</h3>
<p class="font-gray-dark">
    Text inputs can have more than one icon appended to them. Check the examples below.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />

            <div class="row">
                <div class="col-md-4">

                    <div class="form-row">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <a href="javascript:;" class="btn input-append primary-bg" title="">
                                    <i class="glyph-icon icon-caret-down"></i>
                                </a>
                                <div class="append-left">
                                    <input type="text" placeholder="Left dropdown button" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-4">

                    <div class="form-row">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper input-append-right">
                                <a href="javascript:;" class="btn input-append ui-state-default" title="">
                                    <i class="glyph-icon icon-chevron-down"></i>
                                </a>
                                <div class="append-right">
                                    <input type="text" placeholder="Right dropdown button" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-4">

                    <div class="form-row">
                        <div class="form-input col-md-12">
                            <div class="input-append-wrapper">
                                <a href="javascript:;" class="btn input-append primary-bg" title="">
                                    <span class="button-content">
                                        <i class="glyph-icon icon-caret-up"></i>
                                    </span>
                                </a>
                                <a href="javascript:;" class="btn input-append ui-state-default" title="">
                                    <span class="button-content">
                                        <i class="glyph-icon icon-lock float-left"></i>
                                        Button
                                    </span>
                                </a>
                                <div class="append-left float-left">
                                    <input type="text" placeholder="Left dropdown button" name="" id="" />
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Validation response</h3>
<p class="font-gray-dark">
    Use the box shadow core helper classes to style inputs for different validation responses: error, warning, success, info, notice.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form action="" class="col-md-10 center-margin" method="" />

            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Success:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="form-input-icon icon-right">
                        <i class="glyph-icon icon-ok-sign font-size-17 success-bg font-green"></i>
                        <input type="text" placeholder="Inside left icon" name="" id="" class="box-shadow-green font-green" />
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Error:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="form-input-icon icon-right">
                        <i class="glyph-icon icon-remove-sign font-size-17 error-bg font-red"></i>
                        <input type="text" placeholder="Inside left icon" name="" id="" class="box-shadow-red font-red" />
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Warning:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="form-input-icon icon-right">
                        <i class="glyph-icon icon-exclamation-sign font-size-17 warning-bg font-orange"></i>
                        <input type="text" placeholder="Inside left icon" name="" id="" class="box-shadow-orange font-orange" />
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Info:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="form-input-icon icon-right">
                        <i class="glyph-icon icon-info-sign font-size-17 info-bg font-gray"></i>
                        <input type="text" placeholder="Inside left icon" name="" id="" class="box-shadow-gray font-gray" />
                    </div>
                </div>
            </div>
            <div class="form-row pad0B">
                <div class="form-label col-md-2">
                    <label for="">
                        Notice:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <div class="form-input-icon icon-right">
                        <i class="glyph-icon icon-question-sign font-size-17 notice-bg font-blue"></i>
                        <input type="text" placeholder="Inside left icon" name="" id="" class="box-shadow-blue font-blue" />
                    </div>
                </div>
            </div>

        </form>

    </div>
    
</div>

<h3>Submit buttons</h3>
<p class="font-gray-dark">
    Submit buttons are styled like any other Fides Admin button. You can use both the theme &amp; core color schemes.
</p>

<div class="infobox warning-bg">
    <p><i class="glyph-icon icon-exclamation mrg10R"></i>To view the available buttons options &amp; configurations you can visit the <a href="buttons.html" target="_blank" title="Fides Admin Buttons documentation">Fides Admin Buttons documentation</a> page.</p>
</div>

<div class="example-box">
    <div class="example-code clearfix">

        <button class="btn ui-state-default medium">
            <span class="button-content">Submit button secondary</span>
        </button>
        <button class="btn ui-state-default medium mrg15R" disabled="">
            <span class="button-content">Disabled</span>
        </button>

        <button class="btn primary-bg medium">
            <span class="button-content">Submit button primary</span>
        </button>
        <button class="btn primary-bg medium" disabled="">
            <span class="button-content">Disabled</span>
        </button>

    </div>
    
</div>

<h3>Bordered form layout</h3>
<p class="font-gray-dark">
    The form layouts can also be bordered like in the example below. To create bordered layouts you need to wrap your form in an element with class <b>form-bordered</b>.
</p>

<div class="example-box">
    <div class="example-code clearfix">

        <form class="form-bordered" action="" method="" />
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        First Name:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input type="text" name="" id="" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Last Name:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input type="text" name="" id="" />
                </div>
            </div>
            <div class="form-row">
                <div class="form-label col-md-2">
                    <label for="">
                        Email:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input type="text" name="" id="" />
                </div>
            </div>
            <div class="form-row pad0B">
                <div class="form-label col-md-2">
                    <label for="">
                        Website:
                    </label>
                </div>
                <div class="form-input col-md-10">
                    <input type="text" name="" id="" />
                </div>
            </div>
        </form>

    </div>
    
</div>


<h3>Forms validation</h3>
<p class="font-gray-dark">
    You can easily and quickly create form validation rules directly from the DOM, without writing additional javascript.
</p>

<div class="infobox warning-bg">
    <p><i class="glyph-icon icon-exclamation mrg10R"></i>To view the available form validation options &amp; configurations you can visit the <a href="forms_validation.html" target="_blank" title="Fides Admin Forms Validation documentation">Fides Admin Forms Validation documentation</a> page.</p>
</div>


                	</div><!-- #page-content -->
            </div><!-- #page-main -->
        </div><!-- #page-wrapper -->

    </body>
</html>
